<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        input[type="submit"], .button-link {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        input[type="submit"]:hover, .button-link:hover {
            background-color: #45a049;
        }

        .button-container {
            text-align: center;
            margin-top: 15px;
        }

        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .login-container {
            background-image: url('img/wzu.jpg');
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-box {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        input[type="text"], input[type="password"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<%
    String username = "";
    String password = "";
    javax.servlet.http.Cookie[] cookies = request.getCookies();
    if (cookies != null && cookies.length > 0) {
        for (int i = 0; i < cookies.length; i++) {
            if ("username".equals(cookies[i].getName())) {
                username = cookies[i].getValue();
            }
            if ("password".equals(cookies[i].getName())) {
                password = cookies[i].getValue();
            }
        }
    }
%>
<div class="login-container">
    <div class="form-box">
        <h2>登录</h2>
        <form id="loginForm" action="<%=request.getContextPath()%>/login" method="post">
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" placeholder="请输入账号" value="<%=username%>" required><br>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" value="<%=password%>" required><br>
            <input type="submit" value="登录">
        </form>
        <div class="button-container">
            <button class="button-link" onclick="window.location.href='<%=request.getContextPath()%>/insert.jsp'">注册</button>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    // 当文档加载完成时执行函数
    $(document).ready(function () {
        // 绑定表单提交事件
        $("#loginForm").submit(function (event) {
            // 阻止默认的表单提交行为
            event.preventDefault();
            // 序列化表单数据
            var formData = $(this).serialize();
            // 输出表单数据到控制台用于调试
            console.log(formData);
            // 使用jQuery的post方法发送表单数据到服务器
            $.post("<%=request.getContextPath()%>/login", formData, function (data) {
                // 输出服务器返回的数据到控制台用于调试
                console.log("登录结果：" + data);
                // 根据服务器返回的数据进行不同的操作
                if (data === "账号或密码错误") {
                    alert("账号或密码错误，请重新输入");
                } else if (data === "请输入完整的账号和密码") {
                    alert("请输入完整的账号和密码");
                } else if(data === "登录成功")
                {
                    alert("登录成功！");
                    // 将用户信息存储到会话存储中
                    sessionStorage.setItem('userInfo', data);
                    // 登录成功后重定向到主页
                    window.location.href = "./application/bookList.jsp";
                }
                else {
                    alert("登录失败，未知错误");
                }
            });
        });
    });
</script>

</body>
</html>